<template>
    <div class="content">
        <div class="img">
            <img :src="imageUrl" draggable="false" alt="" />
        </div>
        <div class="texts">
            <div v-for="item in tips" :key="item.id" class="item">
                <h2>{{ item.title }}</h2>
                <h4>{{ item.detail }}</h4>
            </div>
        </div>
    </div>
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed } from 'vue';

interface Props {
    type: number;
}

const props = withDefaults(defineProps<Props>(), {
    type: 0
});

const tips_keyid = reactive<any>([
    {
        id: 1,
        title: '自动同步用户电商订单',
        detail: '通过标准API接口同步客户购买过的店铺订单至客易达，方便员工在聊天过程中快速获取客户的消费金额、平均客单价、订单等信息。'
    },
    {
        id: 2,
        title: '记录用户行为轨迹',
        detail: '通过标准API接口记录用户的浏览、加购、购买等用户行为同步至客易达，方便员工在聊天时查看用户的喜好、历史足迹。'
    },
    {
        id: 3,
        title: '自动同步商品、页面素材',
        detail: '通过标准API接口同步电商商品至客易达、方便用户在侧边栏中给客户分享电商商品及页面，形成交易转化。'
    },
    {
        id: 4,
        title: '同步解析订单收货人信息',
        detail: '解析订单收货人信息，分配员工加好友。'
    },
    {
        id: 5,
        title: '连接客易达',
        detail: '连接客易达，可自动关联已有客户系统的数据，批量添加好友，做精准营销。'
    }
]);

const tips_youzan = reactive<any>([
    {
        id: 1,
        title: '自动同步有赞电商订单',
        detail: '自动同步客户购买过的电商订单至客易达，方便员工在聊天过程中快速获取客户的消费金额、平均客单价、订单等信息。'
    },
    {
        id: 2,
        title: '记录用户行为轨迹',
        detail: '用户注册、完善信息、购买等用户行为同步至客易达，方便员工在聊天时查看用户的喜好、历史轨迹。'
    },
    {
        id: 3,
        title: '自动同步商品、页面素材',
        detail: '同步电商商品、页面至客易达，方便用户在侧边栏中给客户分享电商商品及页面，形成交易转化。'
    },
    {
        id: 4,
        title: '连接客易达',
        detail: '连接客易达，可自动关联已有客户系统的数据，批量添加好友，做精准营销。'
    }
]);

const tips_taobao = reactive<any>([
    {
        id: 1,
        title: '自动同步用户淘宝订单',
        detail: '自动同步客户购买过的淘宝订单至客易达，方便员工在聊天过程中快速获取客户的消费金额、平均客单价、订单等信息。'
    },
    {
        id: 2,
        title: '同步解析商品素材',
        detail: '同步淘宝商品至客易达、方便用户在侧边栏中给客户分享淘宝商品，形成交易转化。'
    },
    {
        id: 3,
        title: '同步解析订单收货人信息',
        detail: '解析订单收货人信息，分配员工加好友。'
    },
    {
        id: 4,
        title: '连接客易达',
        detail: '连接客易达，可自动关联已有客户系统的数据，批量添加好友，做精准营销。'
    }
]);
const tips_tmall = reactive<any>([
    {
        id: 1,
        title: '自动同步用户天猫订单',
        detail: '自动同步客户购买过的天猫订单至客易达，方便员工在聊天过程中快速获取客户的消费金额、平均客单价、订单等信息。'
    },
    {
        id: 2,
        title: '同步解析商品素材',
        detail: '同步天猫商品至客易达、方便用户在侧边栏中给客户分享天猫商品，形成交易转化。'
    },
    {
        id: 3,
        title: '同步解析订单收货人信息',
        detail: '解析订单收货人信息，分配员工加好友。'
    },
    {
        id: 4,
        title: '连接客易达',
        detail: '连接客易达，可自动关联已有客户系统的数据，批量添加好友，做精准营销。'
    }
]);

const tips_douyin = reactive<any>([
    {
        id: 1,
        title: '自动同步抖店客户订单',
        detail: '自动同步抖店客户订单至客易达，方便员工在聊天过程中快速获取客户的消费金额、平均客单价、订单等信息。'
    },
    {
        id: 2,
        title: '自动同步抖店商品素材',
        detail: '自动同步抖店商品至客易达，方便客户在侧边栏中给客户分享抖店商品，形成交易转化。'
    },
    {
        id: 3,
        title: '同步解析订单购买者、收货人信息',
        detail: '解析订单购买者的收货信息，分配员工加好友。'
    },
    {
        id: 4,
        title: '连接客易达',
        detail: '连接客易达，可自动关联已有客户系统的数据，批量添加好友，做精准营销。'
    }
]);

const tips_kuaishou = reactive<any>([
    {
        id: 1,
        title: '自动同步快手小店客户订单',
        detail: '自动同步快手小店客户订单至客易达，方便员工在聊天过程中快速获取客户的消费金额、平均客单价、订单等信息。'
    },
    {
        id: 2,
        title: '自动同步快手小店商品素材',
        detail: '自动同步快手小店商品至客易达，方便员工在侧边栏中给客户发送商品信息，促进交易转化。'
    },
    {
        id: 3,
        title: '同步解析订单购买者、收货人信息',
        detail: '解析订单购买者的收货信息，分配员工加好友。'
    },
    {
        id: 4,
        title: '连接客易达',
        detail: '连接客易达，自动关联已有客户系统的数据，批量添加好友，做精准营销。'
    }
]);
const tips_self = reactive<any>([
    {
        id: 1,
        title: '自动同步用户电商订单',
        detail: '通过标准API接口同步客户购买过的店铺订单至客易达，方便员工在聊天过程中快速获取客户的消费金额、平均客单价、订单等信息。'
    },
    {
        id: 2,
        title: '记录用户行为轨迹',
        detail: '通过标准API接口记录用户的浏览、加购、购买等用户行为同步至客易达，方便员工在聊天时查看用户的喜好、历史足迹。'
    },
    {
        id: 3,
        title: '自动同步商品、页面素材',
        detail: '通过标准API接口同步电商商品至客易达、方便用户在侧边栏中给客户分享电商商品及页面，形成交易转化。'
    },
    {
        id: 4,
        title: '同步解析订单收货人信息',
        detail: '解析订单收货人信息，分配员工加好友。'
    },
    {
        id: 5,
        title: '连接客易达',
        detail: '连接客易达，可自动关联已有客户系统的数据，批量添加好友，做精准营销。'
    }
]);

const tips_offline = reactive<any>([
    {
        id: 1,
        title: '自动同步用户电商订单',
        detail: '通过标准API接口同步客户购买过的店铺订单至客易达，方便员工在聊天过程中快速获取客户的消费金额、平均客单价、订单等信息。'
    },
    {
        id: 2,
        title: '记录用户行为轨迹',
        detail: '通过标准API接口记录用户的浏览、加购、购买等用户行为同步至客易达，方便员工在聊天时查看用户的喜好、历史足迹。'
    },
    {
        id: 3,
        title: '自动同步商品、页面素材',
        detail: '通过标准API接口同步电商商品至客易达、方便用户在侧边栏中给客户分享电商商品及页面，形成交易转化。'
    },
    {
        id: 4,
        title: '同步解析订单收货人信息',
        detail: '解析订单收货人信息，分配员工加好友。'
    },
    {
        id: 5,
        title: '连接客易达',
        detail: '连接客易达，可自动关联已有客户系统的数据，批量添加好友，做精准营销。'
    }
]);

const tips_video_number = reactive<any>([
    {
        id: 1,
        title: '自动同步用户视频号小店订单',
        detail: '自动同步用户购买过的视频号小店订单至客易达，方便员工在聊天过程中快速获取客户的消费金额、平均客单价、订单等信息。'
    },
    {
        id: 2,
        title: '自动同步商品素材',
        detail: '同步视频号小店商品至客易达，方便员工在侧边栏中给客户分享视频号小店商品，形成交易转化。'
    },
    {
        id: 3,
        title: '自动解析订单下单人和收货人信息',
        detail: '解析订单下单人信息，通过unionid合并微信生态下的客户；解析订单收货人信息，分配员工加好友。'
    },
    {
        id: 4,
        title: '连接客易达',
        detail: '连接客易达，可自动关联已有客户系统的数据，批量添加好友，做精准营销。'
    }
]);

const getImageUrl = (name: string): any => {
    return `//static.scrm.keyid.cn/assets/images/web-pc/${name}.png`;
};

const tips = computed(() => {
    //  0 全部  1 客易达   2 有赞   3 淘宝   4 自营   5 线下门店  6 天猫  7 抖店  8 京东   9  视频号小店 10 快手
    switch (props.type) {
        case 1:
            return tips_keyid;
        case 2:
            return tips_youzan;
        case 3:
            return tips_taobao;
        case 4:
            return tips_self;
        case 5:
            return tips_offline;
        case 6:
            return tips_tmall;
        case 7:
            return tips_douyin;
        case 9:
            return tips_video_number;
        case 10:
            return tips_kuaishou;
        default:
            return tips_keyid;
    }
});

const imageUrl = computed(() => {
    let imgName = '';
    //  0 全部  1 客易达   2 有赞   3 淘宝   4 自营   5 线下门店  6 天猫  7 抖店  8 京东 9 视频号 10 快手小店
    switch (props.type) {
        case 1:
            imgName = 'keyid';
            break;
        case 2:
            imgName = 'youzan';
            break;
        case 3:
            imgName = 'taobao';
            break;
        case 4:
            imgName = 'self';
            break;
        case 5:
            imgName = 'offline';
            break;
        case 6:
            imgName = 'tmall';
            break;
        case 7:
            imgName = 'douyin';
            break;
        case 9:
            imgName = 'wxVideoStore';
            break;
        case 10:
            imgName = 'kuaishou';
            break;
        default:
            imgName = 'keyid';
            break;
    }
    return getImageUrl(imgName);
});
</script>
<style scoped lang="scss">
.content {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    .img {
        width: 68%;
        margin-bottom: 16px;
        img {
            width: 100%;
        }
    }
    .texts {
        flex: 1;
        width: 88%;
        overflow: auto;
        box-sizing: border-box;
        padding-right: 8px;
        .item {
            line-height: 2;
            h2 {
                font-size: 13px;
                font-weight: 500;
            }
            h4 {
                font-size: 12px;
                font-weight: 200;
            }
        }
    }
}
</style>
